<template>
  <div>
    <el-header class="clearfix">
      <div class="left">
        <img src="../assets/images/logo.jpeg" alt="" />
        <h1>专业技术人员职称评审系统</h1>
      </div>
      <div class="right" v-if="user">
        <ul>
          <li>
            <a href="javascript:;" @click="exit()"
              ><i class="el-icon-switch-button"></i>退出登录</a
            >
          </li>
          <li>
            <a
              href="javascript:;"
              @click="
                () => {
                  this.$router.push('/company/AccountSetup');
                }
              "
              ><i class="el-icon-setting"></i>账户设置</a
            >
          </li>
          <li>
            <a href="javascript:;" @click="()=>{this.$router.push('/personalinformation/personaldata')}"><span>欢迎您，{{name}}专技人员</span></a>
          </li>
          <li>
            <a href="javascript:;" @click="()=>{this.$router.push('/home')}"><i class="el-icon-back"></i>返回门户</a>
          </li>
        </ul>
      </div>
    </el-header>
  </div>
</template>
<script>
export default {
  data() {
    return {
      user:'',
      name:''
    }
  },
  methods:{
    exit(){
      sessionStorage.removeItem('user');
      this.$router.push('/home')
    }
  },
  mounted(){
    sessionStorage.getItem('user')&&(this.user=sessionStorage.getItem('user'));
    this.user&&(this.name=JSON.parse(this.user).name)
  }
}
</script>
<style lang="less" scoped>
.left {
  float: left;
  img {
    margin: 10px;
    float: left;
    height: 40px;
    width: 40px;
    border-radius: 50%;
  }
  h1 {
    float: left;
  }
}
.right {
  float: right;
  ul {
    li {
      float: right;
      height: 40px;
      line-height: 40px;
      padding: 10px;
      a {
        color: rgb(204, 204, 204);
        i {
          margin-right: 5px;
        }
      }
    }
  }
}
.el-header {
  background-color: rgb(70, 76, 91);
  color: #fff;
  line-height: 60px;
}
.clearfix:after {
  content: "";
  clear: both;
  display: block;
}
</style>